<template>
  <div class="imageContainer">
    <div>点餐小程序后台管理</div>
  </div>

  <div class="loginContainer">
    <div class="loginContent">
      <div class="loginTitle">欢迎再次回来</div>
      <div class="loginBody">
        <el-input
          v-model="username"
          placeholder="请输入用户账号"
          :prefix-icon="User"
          clearable
        />
        <el-input
          v-model="password"
          placeholder="请输入用户密码"
          :prefix-icon="Lock"
          clearable
        />
      </div>
      <div class="loginBottom">
        <el-button
          class="loginButton"
          type="primary"
          size="Large"
          @click="managerLogin"
          >Login</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import request from "../request/axios.js";
import router from "../router/index.js";
import { User, Lock } from "@element-plus/icons-vue"; 

let username = ref("");
let password = ref("");

const managerLogin = () => {
    request.post("/user/manager/login", {
      username: username.value,
      password: password.value,
    })
    .then((res) => {
      if (!username.value || !password.value) {
        ElMessage.warning("账号或密码不能为空");
        return;
      } else if (res.code === "200") {
        localStorage.setItem("user", JSON.stringify(res));
        ElMessage.success("登录成功，欢迎回家");
        router.push("/home");
      } else {
        username.value = "";
        password.value = "";
        ElMessage.error("账户或密码错误");
      }
    })
}
</script>

<style>
body,
#app {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  margin: 0%;
  padding: 0%;
}

.imageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "宋体";
  font-weight: 700;
  font-size: 150%;
  letter-spacing: 2px;
  color: #ffffff;
  width: 50vw;
  height: 100vh;
  background-position: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("../assets/image/background.jpg");
}

.loginContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50vw;
  height: 100vh;
}

.loginContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40%;
  height: 30%;
  border: 1px solid #222222;
  border-radius: 12px;
  background-color: #d8faff;
}

.loginTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "楷体";
  font-size: 130%;
  font-weight: 700;
  letter-spacing: 2px;
  width: 100%;
  height: 40%;
}

.loginBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 85%;
  height: 35%;
}

.loginBottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 25%;
}

.loginButton {
  letter-spacing: 2px; 
  font-family: "Trebuchet MS";
  font-weight: 700;
  width: 60%;
}
</style>